<template>
  <div class="air-quality-container">
    <h2 class="location-title">{{ location.name }}·空气质量信息</h2>
    <div class="aqi-summary">
      <p class="aqi-item">空气质量指数：<span class="value">{{ IndexesData.aqiDisplay }}</span></p>
      <p class="aqi-item">空气质量指数等级：<span class="value">{{ IndexesData.level }}</span></p>
      <p class="aqi-item">指数类别：<span class="value">{{ IndexesData.category }}</span></p>
    </div>
    <div class="pollutants">
      <a-descriptions title="空气质量详情" bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
        <a-descriptions-item v-for="(item, index) in pollutants" :key="index" :label="item.name">
          {{ item.concentration.value }} (单位：{{ item.concentration.unit }})
        </a-descriptions-item>
        <a-descriptions-item v-if="IndexesData.primaryPollutant" label="首要污染物" span="3">
          {{ IndexesData.primaryPollutant.name }} {{ IndexesData.primaryPollutant.fullName }}
        </a-descriptions-item>
        <a-descriptions-item label="指导建议">
          一般人群：{{ IndexesData.health.advice.generalPopulation ? IndexesData.health.advice.generalPopulation : '无' }}
          <br />
          敏感人群：{{ IndexesData.health.advice.sensitivePopulation }}
          <br />
          空气质量对健康的影响：{{ IndexesData.health.effect }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
import { API_Indexes, KEY } from '@/common/constants';
import axios from 'axios';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      IndexesData: {},
      pollutants: {}
    }
  },
  computed: {
    ...mapState(['location'])
  },
  methods: {
    getData() {
      axios.get(API_Indexes + `/${this.location.lat}/${this.location.lon}`, { params: { key: KEY } })
        .then(res => {
          this.IndexesData = res.data.indexes[0]
          this.pollutants = res.data.pollutants
          console.log(this.IndexesData);
          console.log(this.pollutants);
        })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>
/* .pollutants {
  margin: auto 20%;
} */

.air-quality-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.location-title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
}

.aqi-summary {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.aqi-item {
  margin: 10px 0;
  color: #666;
  font-size: 16px;
}

.aqi-item .value {
  color: #1890ff;
  font-weight: 500;
  margin-left: 8px;
}

.pollutants {
  margin: 20px auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ant Design 描述列表样式优化 */
:deep(.ant-descriptions-title) {
  color: #2c3e50;
  font-size: 18px;
  margin-bottom: 16px;
}

:deep(.ant-descriptions-item-label) {
  background-color: #fafafa;
  font-weight: 500;
}

:deep(.ant-descriptions-item-content) {
  color: #666;
  line-height: 1.6;
}
</style>
